import React, { useState } from 'react'
import { Input, DatePicker, Select, Form, Radio, Button, message } from 'antd';
import Answer from "../../../../components/Record/answer"
import {addNewRecprd} from "../../../../api/myRecord"
import "./index.scss"
const { Option } = Select;

export default function AddRecord(props) {
  const [stationName, setStationName] = useState("")
  const [companyName, setCompanyName] = useState("")
  const [interviewTime, setInterviewTime] = useState("")
  const [duration, setDuration] = useState("")
  const [site, setSite] = useState("")
  const [intervierManagement, setIntervierManagement] = useState("")
  const [record, setRecord] = useState("")
  const [status, setStatus] = useState(0)
  const [issoundrecord, setIssoundrecord] = useState(0)
  const [askAndanswerList, setAskAndanswerList] = useState("")

  const [value, setValue] = useState(0);
  const [val, setVal] = useState(1);
  const [anwsersNumber, setAnwsersNumber] = useState(1)
  const [anwsers, setAnwsers] = useState([
    {
      id: 1,
      question: "",
      answer: ""
    }
  ])
  function onChange(date, dateString) {
    setInterviewTime(dateString)
  }
  const onOne = e => {
    setValue(e.target.value);
    setStatus(e.target.value)
  };
  const onTwo = e => {
    console.log('radio checked', e.target.value);
    setVal(e.target.value);
    setIssoundrecord(e.target.value)
  };
  const addanswer = async () => {
    let a = anwsersNumber + 1
    await setAnwsersNumber(a)
    await setAnwsers([...anwsers, { id: a, question: "", answer: "" }])
  }
  const deleteanswer = () => {
    if (anwsersNumber === 1) {
    } else {
      setAnwsersNumber(anwsersNumber - 1)
      anwsers.pop()
    }
  }
  const setanswer = (id, question, answer) => {
    console.log(id, question, answer);
    anwsers.find(item => item.id === id).question = question
    anwsers.find(item => item.id === id).answer = answer
    console.log(anwsers);
    setAskAndanswerList(anwsers)
  }
  const submit = async() => {
   let res = await addNewRecprd({
      stationName,
      // 岗位名称
      companyName,
      // 公司名称
      interviewTime,
      // 面试时间
      duration,
      // 时长
      site,
      // 地点intervierManagement
      intervierManagement,
      // 面试官
      marjorName: "北京网站",
      // 专业
      
      commitName: "黄辉",
      // 提交人
      record,
      // 记录/吐槽
      status,
      // 面试结果
      issoundrecord,
      // 录音文件
      askAndanswerList
    });
    if(res.data.code===200){
      message.success(res.data.msg)
      props.history.push("/home/interview/record")
    }
  }
  return (
    <div className="addrecord">
          <h1>添加面试记录</h1>
      <Form>
    
        <div>
          <span><b>岗位名称</b><Input placeholder="请输入你的岗位" onChange={(e) => { setStationName(e.target.value) }} /></span>
          <span><b>公司名称</b><Input placeholder="请输入你的公司" onChange={(e) => { setCompanyName(e.target.value) }} /></span>
        </div>
        <div>
          <span><b>面试时间</b><DatePicker showTime onChange={onChange} /></span>
          <span><b>时长</b>
            <Select placeholder="选择面试的时间" onChange={(e) => {
              setDuration(e)
            }}
              allowClear>
              <Option value="半小时">半小时</Option>
              <Option value="半小时到一小时">半小时到一小时</Option>
              <Option value="一小时以上">一小时以上</Option>
            </Select>
          </span>
        </div>
        <div>
          <span><b>地点</b><Input placeholder="输入你面试的地点" onChange={(e) => { setSite(e.target.value) }} /></span>
          <span><b>面试官</b><Input placeholder="输入面试官" onChange={(e) => { setIntervierManagement(e.target.value) }} /></span>
        </div>
        <div>
          <span><b>专业</b><span>北京网站</span></span>
          <span><b>提交人</b><span>黄辉</span></span>
        </div>
        <div>
          <b>记录-吐槽</b>
        </div>
        <Input.TextArea placeholder="请输入你的小作文" onChange={(e) => {
            setRecord(e.target.value)
          }} />
        <div>  
          <b>面试结果</b>
          <Radio.Group onChange={onOne} value={value}>
            <Radio value={0}>不确定</Radio>
            <Radio value={1}>通过</Radio>
            <Radio value={2}>不通过</Radio>
          </Radio.Group>
        </div>
        <div>
          <b>录音文件</b>
          <Radio.Group onChange={onTwo} value={val}>
            <Radio value={0}>无</Radio>
            <Radio value={1}>有</Radio>
          </Radio.Group>
        </div>
        <div>
          <b>面试问题</b>
         
        </div>
         <span className="tit">请如实填写面试问题和答案，面试中没有作答的题目可略过答案填写，直接输入问题即可。</span>
        {
          anwsers.map((item, index) => {
            return <Answer key={index} id={item.id} setA={setanswer} deleteAnswer={deleteanswer} addAnswer={addanswer} />
          })
        }
        <Button onClick={() => {
        submit()
      }}>提交</Button>
      </Form>
      
    </div>
  )
}
